<template>
  <div v-loading="loading"
    element-loading-text="拼命加载中"
    
    class="loadaaa">
    <h1>注册页面</h1>
    你的名字:<input  type="text" v-model="userInfo.name" ><br/>  
    <span v-show="!reqUserName.test(userInfo.name)">4到16位（字母，数字，下划线，减号）</span><br>
   你的手机号: <input type="number" v-model="userInfo.phone" /><br>
    <span v-show="!reqPhone.test(userInfo.phone)">填写11位手机号码</span><br>
    您的密码:<input type="password" v-model="userInfo.password" /> <br/>
    <span v-show="!reqPassword.test(userInfo.password)">大小写字母,数字,4~16位组成</span><br>
    <button @click="registerHandler(userInfo)">注册</button>
  </div>
</template>

<script>
//引入请求登陆的接口
import { userRegister } from "../assets/request.js";
//引入辅助函数
import {mapActions}  from "vuex";
export default {
  name: "Login",
  data() {
    return {
      loading: false,
      userInfo: {
        //注册
        name:"manman",
        phone: "17835696730",
        password: "123456",

      },
      //存放注册成功的用户信息
      newUser:[],
      //注册信息的正则判断
      reqPhone: /^1[3456789]\d{9}$/,
      reqPassword:/^[a-zA-Z0-9]{4,16}$/,
      reqUserName: /^[a-zA-Z0-9_-]{4,16}$/,
    };
  },
  methods: {
   
   async registerHandler(userInfo){
    try{ 
      //发送登陆请求
      this.loading=true;
      let res = await userRegister(userInfo)
      //设置用户名,设置登陆态,设置token
      //把用户名传给vuex
      this.newUser=res.data.result.name
      sessionStorage.setItem("username",res.data.result.name)
      console.log(this.newUser);
      this.$message({
        message:"注册成功",
        type:"success",
        duration:800,
      });
      this.loading=false;
      this.$router.push({
      name:"login",
    })
    }catch(error){
       this.loading = false;
       this.$message({
        message:"注册失败",
        type:"warning",
        duration:800,
       });
    }
   
   }
  },
};
</script>

<style lang="scss" scoped>
@charset 'utf-8';
@import '../../public/scss/common.scss';

//vw单位响应式布局
@function get($a) {
  @return ($a/1920)*100+vw
}
.loadaaa{
      margin-top: get(160);
      overflow: hidden;
  //  width: get(1920);
   height: get(600);
   background-color: $color1;
  >h1{
    margin-top: get(140);
    margin-bottom: get(20);
  }
  >input{
    margin-top: get(10);
    margin-bottom: get(4);
    margin-left: get(50);
    width: get(250);
    height: get(30);
  }
  >span{
      color: $color;
      margin-left: get(50);
  }
  >button{
    margin-top: get(20);
    width: get(100);
    height: get(40);
    border-radius: get(20);
    border: 1px solid $color;
   &:hover{
    background-color: $color;
    color: #fff;
    border: 1px solid $color;
   }
  }
}
</style>

